<template>
	<view class="good-box m-b-25 p-20 bg-white radius-15">
		<view>
			<uv-tabs :list="props.data.list" keyName="title" lineColor="#D33123" @change="hanlderChangeTab"></uv-tabs>
		</view>
		<!-- 列表平铺 -->
		<view :class="['data-box m-t-20', `data-box-${goodsState.column}`]">
			<view v-for="cell,cellIndex in goodsState.goodsList" :key="cellIndex" class="waterfall-box">
				<view v-for="item, index in cell" :key="index" :class="['card-box', `card-box-${goodsState.column}`]">
					<coreshop-goods-card :type="goodsState.column == 1 ? 'horizontal' : 'vertical'"
						:imgHeight="hanlderGoodsWidth()" :imgWidth="hanlderGoodsWidth()"
						:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
						<template #goodPrice>
							<view class="price-msg" v-if="goodsState.column == 1" @click="hanldeClickGoods(item)">
								<view class="tag-box">
									<view class="tag tag-buy">已售{{ item.buyCount }}{{ item.unit }}</view>
									<view class="tag tag-view">{{ item.viewCount }}人访问</view>
								</view>
								<view class="price-box">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="num">{{ item.price }}</text>
									</view>
									<view class="btn">立即购买</view>
								</view>
							</view>
							<view class="price-msg" v-else @click="hanldeClickGoods(item)">
								<view class="price-box">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="num">{{ item.price }}</text>
										<text class="mktprice" v-if="props.data.column == 2">￥{{ item.mktprice }}</text>
									</view>
									<view class="buyCount">已售{{ item.buyCount }}{{ item.unit }}</view>
								</view>
								<Point :data="item" :flex="false"></Point>
							</view>
						</template>
						<template #other v-if="props.data.column == 1">
							<Point :data="item" :flex="true"></Point>
						</template>
					</coreshop-goods-card>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import Point from '../home-goods/point.vue';
	import { handleRouteNavigateTo, splitArrayByStep } from '@/core/utils';

	const props = withDefaults(defineProps<{
		data : any,
	}>(), {
		data: {},
	});

	const goodsState = reactive<{
		goodsList : Array<any>;
		column : number;
	}>({
		goodsList: [],
		column: 1,
	})

	onMounted(() => {
		hanlderChangeTab(props.data.list[0]);
	})

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.image,
			name: item.name,
			brief: item.brief,
			price: item.price,
			mktprice: item.mktprice,
			isRecommend: item.isRecommend,
			isHot: item.isHot,
		}
	}

	// 根据返回的列数返回商品的图片宽高
	const hanlderGoodsWidth = () => {
		if (goodsState.column == 3) {
			return '180rpx'
		}
		if (goodsState.column == 2) {
			return '295rpx'
		}
	}

	const hanlderChangeTab = (e : any) => {
		goodsState.column = e.column;
		goodsState.goodsList = splitArrayByStep(e.list.slice(0, e.limit), e.column);
	}

	const hanldeClickGoods = (data : any) => {
		handleRouteNavigateTo(`/pages/goods/detail?id=${data?.id}`)
	}
</script>
<style lang="scss" scoped>
	@import './home-goods-tab-bar.scss';
</style>